<template>
  <div class="setting">
    <div class="top">
      <i class="iconfont icon-fanhui fanhui" @click="back"></i>
      <span class="title">设置</span>
    </div>
    <div class="content">
      <div class="group">
        <img class="icon" src="../static/img/zhanghaoanquan.png" alt="">
        <p class="text" @click="setPersonDetail">修改资料</p>
        <span class="right">&gt;</span>
      </div>
      <div class="group">
        <img class="icon" src="../static/img/yijianfankui.png" alt="">
        <p class="text">意见反馈</p>
        <span class="right">&gt;</span>
      </div>
      <div class="group">
        <img class="icon" src="../static/img/guanyuyoufu.png" alt="">
        <p class="text">关于优辅</p>
        <span class="right">&gt;</span>
      </div>
    </div>
    <input type="button" class="tuichu" value="安全退出" @click="out">
  </div>
</template>

<script>
  import {mapMutations} from 'vuex'

  export default {
    methods: {
      ...mapMutations([
        'SET_USER'
      ]),
      back() {
        this.$router.go(-1)
      },
      setPersonDetail() {
        this.$router.push({path: '/personal/detail'})
      },
      out() {
        this.SET_USER({})
        this.$router.push({path: '/personal'})
      }
    }
  }
</script>

<style scoped>
  .setting {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #F5F5F5;
    z-index: 999;
  }

  .top {
    display: flex;
    background: #fff;
    align-items: center;
    padding: 10px 0;
  }

  .top .fanhui {
    flex: 0 0 25px;
    color: #ccc;
    font-weight: bold;
    margin-left: 15px;
  }

  .top .title {
    flex: 1;
    text-align: center;
    margin-left: -15px;
  }

  .content .group {
    display: flex;
    align-items: center;
    padding: 15px 0;
    background: #fff;
    border-bottom: 1px solid #F5F5F5;
  }

  .content .group .icon {
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    margin: 0 15px;
  }

  .content .group .text {
    flex: 1;
  }

  .content .group .right {
    flex: 0 0 25px;
    font-size: 18px;
    color: #ccc;
  }

  .tuichu {
    display: block;
    width: 90%;
    height: 45px;
    background: #06cd56;
    border: 0 none;
    outline: 0 none;
    margin: 45px auto;
    color: #fff;
  }
</style>
